<script lang="ts" setup>
import type { FormInst } from 'nutui-uniapp'
import mcht from '@/api/mcht'
import { useHomeStore } from '@/store'

const homeStore = useHomeStore()
const { modifyStore, modifyStoreType, fileType40ImageList, fileType41ImageList, fileType42ImageList } = storeToRefs(homeStore)
const ruleForm = ref<FormInst | null>(null)
// console.log('tp----')
// console.log(modifyStore.value)
const doorUploader = ref()
const bizUploader = ref()
const proptUploader = ref()

function doorValidator() {
  return new Promise((resolve) => {
    doorUploader.value.validate().then((valid: boolean) => {
      resolve(valid)
    })
  })
}
function bizValidator() {
  return new Promise((resolve) => {
    bizUploader.value.validate().then((valid: boolean) => {
      resolve(valid)
    })
  })
}
function proptValidator() {
  return new Promise((resolve) => {
    proptUploader.value.validate().then((valid: boolean) => {
      resolve(valid)
    })
  })
}

const rules = {
  door: [
    { validator: doorValidator, message: '请上传门头照图片' },
  ],
  biz: [
    { validator: bizValidator, message: '请上传经营环境照图片' },
  ],
  propt: [
    { validator: proptValidator, message: '请上传关联关系证明材料图片' },
  ],
}

function submit() {
  // 表单校验
  ruleForm.value?.validate().then(async ({ valid }) => {
    if (valid) {
      // 处理图片信息
      const imageIds = [
        ...fileType40ImageList.value.map(img => img.name),
        ...fileType41ImageList.value.map(img => img.name),
        ...fileType42ImageList.value.map(img => img.name),
      ]
      modifyStore.value.imageIds = imageIds
      if (modifyStoreType.value === 'new') {
        const { data } = await mcht.submitStore(modifyStore.value)
        if (data.status === 'success') {
          homeStore.resetImageList()
          uni.showToast({
            icon: 'success',
            title: data.message,
            duration: 3000,
          })
          uni.navigateBack({
            delta: 2,
          })
        }
      }
      else if (modifyStoreType.value === 'update') {
        const { data } = await mcht.submitUpdateStore(modifyStore.value)
        if (data.status === 'success') {
          if (data.data.action === 'refresh') {
            uni.showModal({
              title: '提示',
              content: data.message,
              showCancel: false,
              success(res) {
                if (res.confirm) {
                  homeStore.resetImageList()
                  uni.navigateBack({
                    delta: 2,
                  })
                }
              },
            })
          }
          homeStore.resetImageList()
          uni.showToast({
            icon: 'success',
            title: data.message,
            duration: 3000,
          })
          uni.navigateBack({
            delta: 2,
          })
        }
      }
    }
  })
}
</script>

<template>
  <div class="input">
    <nut-form ref="ruleForm" :model-value="modifyStore" :rules="rules" label-position="top">
      <nut-form-item prop="door" custom-class="li-category">
        <template v-slot:label>
          <div class="li-category-box">
            <div class="li-category-box-title"><i v-if="modifyStoreType !== 'update'" style="margin-right: 5rpx;color: #fa2c19;">*</i>门头照</div>
            <div class="li-category-box-sub">
              <store-pop>
                <div style="padding: 50px 25px">
                  <image class="image" src="/static/home/men.jpeg" />
                </div>
              </store-pop>
            </div>
          </div>
        </template>
        <div style="display: flex; align-items: center;justify-content: space-between;">
          <store-door-uploader ref="doorUploader"
            :disabled="modifyStoreType === 'update' && (modifyStore.storeStatus !== '3' && modifyStore.storeStatus !== '5')" />
          <!-- <store-pop>
            <div style="padding: 50px 25px">
              <image class="image" src="/static/home/men.jpeg" />
            </div>
          </store-pop> -->
        </div>
      </nut-form-item>
      <nut-form-item prop="biz" custom-class="li-category">
        <template v-slot:label>
          <div class="li-category-box">
            <div class="li-category-box-title"><i style="margin-right: 5rpx;color: #fa2c19;">*</i>经营环境照</div>
            <div class="li-category-box-sub">
              <store-pop>
                <div style="padding: 50px 25px">
                  室内门面经营环境照片、收银台照片等证明实际经营情况的照片
                </div>
              </store-pop>
            </div>
          </div>
        </template>
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <store-biz-uploader ref="bizUploader" />
          <!-- <store-pop>
            <div style="padding: 50px 25px">
              室内门面经营环境照片、收银台照片等证明实际经营情况的照片
            </div>
          </store-pop> -->
        </div>
      </nut-form-item>
      <nut-form-item prop="propt" custom-class="li-category">
        <template v-slot:label>
          <div class="li-category-box">
            <div class="li-category-box-title"><i v-if="modifyStoreType !== 'update'" style="margin-right: 5rpx;color: #fa2c19;">*</i>关联关系证明材料</div>
            <div class="li-category-box-sub">
              <store-pop>
                <div style="padding: 50px 25px">
                  门店与主商户的关联关系证明，例加授权协议主商户直营门店新增批文等
                </div>
              </store-pop>
            </div>
          </div>
        </template>
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <store-propt-uploader ref="proptUploader"
            :disabled="modifyStoreType === 'update' && (modifyStore.storeStatus !== '3' && modifyStore.storeStatus !== '5')" />
          <!-- <store-pop>
            <div style="padding: 50px 25px">
              门店与主商户的关联关系证明，例加授权协议主商户直营门店新增批文等
            </div>
          </store-pop> -->
        </div>
      </nut-form-item>
    </nut-form>
    <div class="button">
      <!-- <nut-button type="primary" block @click="submit">提交</nut-button> -->
      <div class="li-btn-tj shake_o" @click="submit">提交</div>
    </div>
  </div>
</template>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "门店录入",
    "backgroundColorContent": "#ffffff"
  }
}
</route>

<style lang="sass" scoped>
.input
  padding-bottom: 20px
  .button
    margin: 40px 20px

.li-category-box
  display: flex
  align-items: center
  justify-content: space-between
  height: 70rpx
  line-height: 70rpx
  font-size: 32rpx
  color: #000000
  .li-category-box-title
    font-weight: bold
    display: flex
  .li-category-box-sub
    font-size: 28rpx
    color: #2196F3

:deep(.li-category)
  margin: 20rpx!important
  padding: 20rpx!important
  background: #f1f1f1!important
  border-radius: 16rpx!important
  width: calc(100% - 40rpx)

:deep(.nut-form-item__label)
  margin-right: 0!important
  padding-right: 0!important

:deep(.nut-icon-failure)
  font-size: 50rpx
  width: 50rpx
  height: 50rpx
  right: 25%
  position: absolute
  background: #fff
  border-radius: 15px

:deep(.nut-uploader__preview)
  margin-right: 20rpx!important

:deep(.nut-uploader__preview-img)
  width: 203rpx!important
  height: 203rpx!important

:deep(.nut-uploader__upload )
  width: 203rpx!important
  height: 203rpx!important
</style>
